<template>
  <view>
    <!--弹出层-->
    <view class="tag-popup">
      <u-popup
          :show="moreStatus"
          mode="right"
          @close="this.moreStatus=false"
          overlay-opacity="0"
          :custom-style="{padding:'15px',boxShadow: '0 3px 10px 0px rgba(0, 0, 0, 0.1)'}"
          :safeAreaInsetBottom="true">
        <!--标题-->
        <view class="title">
          <u-text text="书籍标签"></u-text>
        </view>
        <!--标签-->
        <scroll-view
            class="tag"
            scroll-y="true">
          <view
              v-for="(item,index) in tagList"
              :key="index"
              class="tag-item">
            <u-tag
                @click="tagClick(index)"
                :text="item.content"
                :border-color="item.color"
                :color="item.selected?'#ffffff':item.color"
                :bg-color="!item.selected?'#ffffff':item.color"
                shape="circle"
                :plain="item.selected"
            ></u-tag>
          </view>
        </scroll-view>
        <!--关闭-->
        <view class="btn-close">
          <u-button
              text="关闭"
              type="error"
              plain
              size="medium"
              @click="this.moreStatus=false">
          </u-button>
        </view>
      </u-popup>
    </view>
    <!-- 标签栏 -->
    <u-sticky bgColor="#ffffff" class="tab">
      <u-row customStyle="height:40px">
        <u-col span="4" customStyle="display:flex;justify-content: center;padding-left:20rpx">
          <u-tabs @click="changeTable()" :list="tabList" lineWidth="15"
                  :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
                  :inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
                  itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
          </u-tabs>
        </u-col>
        <u-col span="8">
          <view class="icons">
            <!-- 搜索 -->
            <view class="search-icon">
              <u-search @change="search()" @search="search()" @clear="clear()" v-model="keyword" shape="round"
                        clearabled
                        :show-action="false" placeholder="请输入书名..."></u-search>
            </view>
            <!--更多-->
            <view class="more-icon" @click="moreClick">
              <u-icon name="list" color="#707070" size="25"></u-icon>
            </view>
          </view>
        </u-col>
      </u-row>
    </u-sticky>
    <!-- 图书卡片 -->
    <view v-if="curTableIndex === 0" class="book-card">
      <view
          class="bc-colum"
          v-for="(colum,index) in bookListFilter"
          :key="index"
          @click="bookClick(colum)"
          v-if="!loadingStatus">
        <!-- 图片 -->
        <view class="cover"></view>
        <u-image
            :src="colum.cover"
            mode="aspectFill"
            width="26vw"
            height="38vw"
            radius="10"
            duration="50"
            :show-loading="true">
          <u-skeleton
              slot="loading"
              rows="0"
              :title="true"
              title-width="26vw"
              title-height="38vw">
          </u-skeleton>
        </u-image>
        <view class="mask" v-if="!colum.status">
          <text class="mask-text">借阅中</text>
        </view>
        <view class="title">
          <u-text type="info" :text="colum.name" lines="1"></u-text>
        </view>
      </view>
      <view class="bc-colum" v-for="item in loadingCardList" v-if="loadingStatus">
        <u-skeleton
            :title="true"
            title-height="38vw"
            title-width="26vw"
            rows="1"
            rows-width="26vw"
        ></u-skeleton>
      </view>
    </view>
    <!--图书列表-->
    <view v-if="curTableIndex === 1" class="content">
      <u-cell-group
          :border="false">
        <view
            class="item"
            v-for="(item,index) in bcList_"
            :key="index"
            v-if="!loadingStatus">
          <u-cell
              :is-link="true"
              @click="bookClick(item)">
            <!--封面-->
            <view
                slot="icon"
                class="cover">
              <u-image
                  :src="item.cover"
                  mode="aspectFill"
                  width="10vw"
                  height="14.9vw">
              </u-image>
            </view>
            <!--书名-->
            <view
                slot="title"
                class="title">
              <u-text
                  :text="item.name"
                  :lines="1"
              ></u-text>
            </view>
            <!--详细信息-->
            <view
                slot="label"
                class="text">
              <u-text
                  :text="item.author"
                  type="primary"
                  size="12"
              ></u-text>
              <u-text
                  :text="item.pubHouse"
                  type="info"
                  size="12"></u-text>
            </view>
            <view slot="value">
              <u-tag v-if="!item.status" @click.stop="bookClick(item)" text="借阅中" type="error"></u-tag>
            </view>
          </u-cell>
        </view>
        <view
            v-for="n in 9"
            v-if="loadingStatus">
          <view class="loading">
            <u-skeleton
                rows="2"
                :avatar="true"
                :title="false"
                avatar-size="10vw"
                avatar-shape="square"
            ></u-skeleton>
          </view>
        </view>
      </u-cell-group>
      <view class="divider">
        <u-divider :text="`共${listLength}本书`"></u-divider>
      </view>
    </view>
    <!--没有数据-->
    <view class="book-empty" v-if="!loadingStatus && bookListFilter.length === 0">
      <u-empty
          mode="list"
          text="没有数据呢···"
      ></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      tabList: [
        {
          name: '卡片'
        },
        {
          name: '列表'
        }
      ],
      // 当前tab索引
      curTableIndex: 0,
      bcList: [],
      bcList_: [],
      listLength: 0,
      tagList: [],
      bookIds: [1],
      loadingCardList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      moreStatus: false,
      loadingStatus: true,
      tagSelectStatus: false
    }
  },
  methods: {
    //获取信息
    async getInfo() {
      this.loadingStatus = true
      try {
        const db = uniCloud.database()
        const dbCmd = db.command
        const $ = db.command.aggregate
        let bookRes = (await db.collection('book')
            .field('_id,cover,name,status,author,pubHouse')
            .get()).result.data
        let tagsRes = (await db.collection('label')
            .aggregate()
            .match({
              enableFlag: dbCmd.eq(true)
            })
            .lookup({
              from: 'inner_label_book',
              let: {
                lId: '$_id'
              },
              pipeline: $.pipeline()
                  .match(dbCmd.expr($.eq(['$labelId', '$$lId'])))
                  .project({
                    bookId: 1
                  })
                  .done(),
              as: 'bookIds'
            })
            .project({
              content: 1,
              color: 1,
              bookIds: 1
            })
            .end()).result.data
        this.bcList = this.bcList_ = bookRes
        tagsRes.forEach((value, index, array) => {
          value.selected = false
        })
        this.tagList = tagsRes
      } catch (e) {
      } finally {
        this.loadingStatus = false
        uni.stopPullDownRefresh()
      }
    },
    search() {
      this.bcList_ = this.bcList.filter(item => {
        return (item.name.indexOf(this.keyword, 0) !== -1) || (item.author.indexOf(this.keyword, 0) !== -1) || (item.pubHouse.indexOf(this.keyword, 0) !== -1)
      })
    },
    clear() {
      this.keyword = ''
    },
    changeTable(tab) {
      this.curTableIndex = tab.index
    },
    //卡片点击跳转
    bookClick(colum) {
      uni.navigateTo({url: '/pages/BookDetail?_id=' + colum._id})
    },
    moreClick() {
      this.moreStatus = true
    },
    //标签点击
    tagClick(ind) {
      this.tagList.forEach((value, index, array) => {
        if (ind === index) {
          this.bookIds = value.bookIds
          this.tagSelectStatus = !value.selected
          value.selected = !value.selected
        } else {
          value.selected = false
        }
      })
    }
  },
  computed: {
    bookListFilter() {
      return this.bcList_.filter(data => {
        if (!this.tagSelectStatus) {
          return true
        }
        return this.bookIds.some(value => value.bookId === data._id)
      })
    }
  },
  watch: {
    bcList_: {
      handler(value) {
        this.listLength = value.length
      },
      deep: true
    }
  },
  onLoad() {
    this.getInfo()
  },
  onPullDownRefresh() {
    this.getInfo()
  }
}
</script>

<style lang="scss">
.tag-popup {
  .title {
    margin-bottom: 10px;
  }

  .tag {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tag-item {
      display: flex;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  .btn-close {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.icons {
  display: flex;
  align-items: center;

  .search-icon {
    margin-right: 20rpx;
  }
}

.book-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 2.75vw;
  margin-left: 2.75vw;

  .bc-colum {
    width: 26vw;
    margin: 2vh 2.75vw;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;

    .cover {
    }

    .title {
      width: 26vw;
      margin-top: 5px;
    }

    .mask {
      top: -0.2vh;
      position: absolute;
      width: 26vw;
      height: 38vw;
      border-radius: 10px;
      background: rgba(79, 79, 79, 0.58);
      display: flex;
      align-items: center;
      justify-content: center;

      .mask-text {
        color: #fff;
        font-weight: normal;
        font-size: 20px;
      }
    }
  }
 }

.content {

  .divider {
    margin: 0 15px;
  }

  .item {
    .cover {
    }

    .title {
      margin-left: 10px;
    }

    .text {
      margin-left: 10px;
      margin-top:2px;
    }
  }

  .loading {
    margin: 10px 15px;
  }
}


.book-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20vh;
}

</style>
